<template>
	<view class="bank-card-wrapper">
		<view class="bank-card-item"  v-for="c of bankCardList" :key="c.id">
			<view class="card-info flex-c-s">
				<view class="flex-c">
					<view class="bank-logo">
						<!-- <image v-if="c.bank.includes('招商银行')" src="/static/images/zsyh.png" mode=""></image>
						<image v-else-if="c.bank.includes('邮政银行')" src="/static/images/yzyh.png" mode=""></image>
						<image v-else-if="c.bank.includes('农业银行')" src="/static/images/nyyh.png" mode=""></image>
						<image v-else-if="c.bank.includes('中国银行')" src="/static/images/zgyh.png" mode=""></image>
						<image v-else-if="c.bank.includes('建设银行')" src="/static/images/jsyh.png" mode=""></image>
						<image v-else="c.bank.includes('建设银行')" src="/static/images/other.png" mode=""></image> -->
						<BankLogo :name="c.bank" />
					</view>
					<view class="card-name">
						<view class="fz30">{{c.bank}}</view>
						<text class="card-type fz24 color666">
							{{c.bankOfDeposit}}
						</text>
					</view>
				</view>
				<view class="">
					<uni-icons type="compose" color="#409EFF" size="24" @click="editBank(c)"></uni-icons>
					<uni-icons type="trash" color="#EB5883" size="24" style="margin-left: 10rpx;" @click="deleteBank(c.id)"></uni-icons>
				</view>
			</view>
			<view class="card-number fz26">
				卡号：{{c.bankCardNumber}}
			</view>
		</view>
		
		<NoData v-show="!bankCardList.length" />
		<u-loadmore v-show="bankCardList.length" :status="statusText" marginTop="20" :loading-text="loadingText"
		        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
		
		<view class="bottom-wrapper">
			<button class="public-large-btn flex-c-c" @click="addBankCard">
				<uni-icons type="plus" color="#fff" size="26"></uni-icons> <text>添加银行卡</text>
			</button>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, computed } from 'vue'
import { getAllBank, delBank } from '@/http/my'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import NoData from '@/components/NoData.vue'
import BankLogo from '@/components/BankLogo.vue'

export interface IBank {
	id?: number
	identity?: string
	cardholder: string,
	bank: string,
	bankCardNumber: string,
	bankOfDeposit: string
}

export default defineComponent({
	components: { NoData, BankLogo },
	setup() {
		const state = reactive({
			bankCardList: [] as Array<IBank>,
			total: 0,
			page: 1,
			pageSize: 10, 
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
		})
		
		onShow(() => {
			state.page = 1
			state.bankCardList = []
			getAllBankList()
		})
		
		onReachBottom(() => { // 页面触底事件
			if(state.total === 0) return;
			if(state.total === state.bankCardList.length) return;
			state.page ++
			getAllBankList()  
		})
		
		const statusText = computed(() => {
			return state.total === state.bankCardList.length ? 'nomore' : 'loadmore'
		})
		
		const addBankCard = () => {
			uni.navigateTo({
				url: '/pages/myPackge/bankCard/addBankCard'
			})
		}
		
		const deleteBank = (id?: number) => { 
			uni.showModal({
				title: '提示',
				content: '是否删除',
				success: async (res) => {
					if (res.confirm) {
						let res = await delBank(id!)
						if(res.code === 0) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							state.page = 1
							state.bankCardList = []
							getAllBankList()
						} else {
							uni.showToast({
								title: '删除失败',
								icon: 'error'
							})
						}
					} else if (res.cancel) {
						
					}
				}
			});
			
		}
		
		
		
		const getAllBankList = async () => {
			let res = await getAllBank({
				page: state.page,
				pageSzie: state.pageSize
			}) 
			if(res.code === 0) {
				state.bankCardList = [...state.bankCardList,...(res.data?.list || [])]
				state.total = res.data?.total || 0 
			} 
		}
		
		const editBank = (item: IBank) => {
			uni.navigateTo({
				url: `/pages/myPackge/bankCard/addBankCard?bank=${JSON.stringify(item)}`
			})
		}
		
		return {
			addBankCard,
			statusText,
			deleteBank,
			editBank,
			...toRefs(state)
		}
	}
})
</script>
<style>
	page{
		background-color: #f8f8fa;
	}
</style>
<style lang="scss" scoped>
.bank-card-wrapper{
	padding-bottom: 110rpx;
	.bank-card-item{
		// width: 694rpx;
		// height: 224rpx;
		background-color: #fff;
		margin:  24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		// background-position: center;
		// background-repeat: no-repeat;
		// background-size: 694rpx 224rpx;
		// margin: 24rpx auto;
		// color: #fff;
		.card-info{
			// padding: 32rpx 0 0 0rpx;
		}
		.card-number{
			margin: 30rpx 0rpx 0 0;
			text-align: right;
		}
	} 
}
</style>